<!-- 基础架构页面-->
<template>
  <el-container style="height: 100vh;">
    <!-- 头部 -->
    <el-header style="background-color:#545c64; display: flex; align-items: center;">
      <img alt="logo" class="logo" src="../assets/logo.png">
      <div style="flex: 1;"></div> <!-- 用于平均分配头部空间 -->
      <span style="color:#fff; margin-right: 10px;">欢迎您: {{ this.userName }}</span>
      <el-dropdown style="margin-right: 20px;">
        <el-avatar type="primary"><img :src="this.avatarUrl" alt=""></el-avatar>
        <el-dropdown-menu slot="dropdown">
          <div @click="personalSettings">
            <el-dropdown-item>个人设置</el-dropdown-item>
          </div>
          <div @click="updatePassword">
            <el-dropdown-item>修改密码</el-dropdown-item>
          </div>
          <router-link style="text-decoration: none;" to="/Login">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </router-link>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <el-container>
      <!-- 菜单 -->
      <el-aside :width="Pupil ? '0px' : '200px'">
        <el-menu
            :default-active="isAdmin?'users':isDormitoryManager?'Unit':'Unit'"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff">

          <router-link to="/FOF">
            <el-menu-item v-if="Pupil" index="FOF">
              <i class="el-icon-orange"></i>
              <span slot="title">敬请期待</span>
            </el-menu-item>
          </router-link>

          <router-link to="/users">
            <el-menu-item v-if="isAdmin" index="users">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户信息</span>
            </el-menu-item>
          </router-link>

          <router-link to="/buildings">
            <el-menu-item v-if="isAdmin" index="buildings">
              <i class="el-icon-office-building"></i>
              <span slot="title">楼栋管理</span>
            </el-menu-item>
          </router-link>

          <router-link to="/Unit">
            <el-menu-item v-if="isAdmin||isDormitoryManager" index="Unit">
              <i class="el-icon-school"></i>
              <span slot="title">单元管理</span>
            </el-menu-item>
          </router-link>

          <router-link to="/Dormitories">
            <el-menu-item v-if="isAdmin||isDormitoryManager" index="Dormitories">
              <i class="el-icon-table-lamp"></i>
              <span slot="title">宿舍管理</span>
            </el-menu-item>
          </router-link>

          <router-link to="/DormitoryAllocation">
            <el-menu-item v-if="isAdmin||isDormitoryManager" index="DormitoryAllocation">
              <i class="el-icon-connection"></i>
              <span slot="title">宿舍分配</span>
            </el-menu-item>
          </router-link>


        </el-menu>
      </el-aside>
      <!--      主要的页面内容-->
      <el-main>
        <!-- 仔细看，核心在这，这里是路由的出口-->
        <router-view></router-view>
      </el-main>
    </el-container>

    <el-dialog
        :visible.sync="personalSettingsVisible"
        title="个人设置"
        width="50%">
      <BaseSetting @submit="handlePersonalSettingst" @updateBaseSetting="hideDialog"></BaseSetting>
    </el-dialog>


    <el-dialog
        :visible.sync="updatePasswordVisible"
        title="修改密码"
        width="50%">
      <Security @UpdatePassword="hideDialog" @submit="handleUpdatePassword"></Security>
    </el-dialog>

  </el-container>
</template>

<script>

import BaseSetting from '@/components/settings/BaseSetting.vue';
import Security from '@/components/settings/Security.vue';

export default {
  components: {
    BaseSetting,
    Security
  },
  data() {
    return {
      personalSettingsVisible: false,//个人设置是否显示
      updatePasswordVisible: false,//设置修改密码的页面是否显示
      isAdmin: this.$store.getters.getUser.role == 3,
      Pupil: this.$store.getters.getUser.role == 1,
      isDormitoryManager: this.$store.getters.getUser.role == 0,
    }
  },

  mounted() {
    //   验证是否登录
    this.verifyYourLogin();
    const path = this.isAdmin ? 'users' : this.isDormitoryManager ? 'Unit' : this.Pupil ? "FOF" : "FOF";
    // 在组件加载时执行默认跳转到首页的操作
    this.changeSidebar(path);
    this.userName = this.$store.getters.getUser.name;
    this.avatarUrl = this.$store.getters.getUser.avatarUrl;
  },
  computed: {
    userName() {
      return this.$store.getters.getUser.name;
    },
    avatarUrl() {
      return this.$store.getters.getUser.avatarUrl;
    }
  },
  watch: {
    userName(newName, oldName) {
      // 在userName值发生变化时进行操作
    },
    avatarUrl(newAvatarUrl, oldAvatarUrl) {
      // 在avatarUrl值发生变化时进行操作
    }
  },
  methods: {
    // 显示个人设置弹窗
    personalSettings() {
      this.personalSettingsVisible = true;
    },

    // 显示修改密码设置弹窗
    updatePassword() {
      this.updatePasswordVisible = true;
    },
    // 关闭模态框等操作
    handlePersonalSettingst() {
      this.personalSettingsVisible = false;
    },
    // 关闭模态框等操作
    handleUpdatePassword() {
      this.updatePasswordVisible = false;
    },
    hideDialog() {
      this.personalSettingsVisible = false;
      this.updatePasswordVisible = false;
      this.fetchData();
    },
    changeSidebar(path) {
      // 如果点击的是个人设置菜单项，则打开抽屉
      if (path === '个人设置') {
        this.$emit('openDrawer');
        return;
      }
      // 否则，正常路由导航
      this.$router.push(path).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          throw err;
        }
      });
    },

    //   验证是否登录
    verifyYourLogin() {
      const token = this.$store.getters.getToken;
      if (token === null || token === undefined) {
        // 比如跳转到登录页面
        window.location.href = '/login';
        // 跳转页面
        // this.$router.push({ name: 'Login' });
      }
    },
  }


}
</script>

<style scoped>

.logo {
  height: 50px; /* 调整 logo 高度 */
}


.el-menu-vertical-demo {
  height: 100%;
}

/* 去除 a标签 默认样式 */
a {
  /* 你可以在这里定义去除默认样式的属性，比如文本下划线、颜色等 */
  text-decoration: none; /* 去除下划线 */
  color: inherit; /* 继承父元素颜色 */
}

</style>
